<template>
<el-row class="article-box mv3">
  <el-col :span="4">
    <el-button class="pa0">
      <img :src="detail.creator.avatar" class="br1 h3 w3 dib v-mid" alt="avatar">
    </el-button>
  </el-col>
  <el-col :span="20">
    <el-card :body-style="{padding: '0px'}" class="relative">
      <div slot="header" class="clearfix">
        <span>{{detail.creator.nickname}}</span>
        <span class="moon-gray f7 ml3">{{detail.create_time}}</span>
        <div class="fr mb2">
          <el-tag class="ml1" v-for="tag in detail.tags" v-bind:key="tag" type="success" size="small">{{tag}}</el-tag>
        </div>
      </div>
      <article class="pa4">
        <div class="pr3-ns mb4 mb0-ns w-100">
          <img v-for="pic in detail.pictures" v-bind:key="pic" :src="pic" class="db" :alt="detail.creator.nickname + '的图片分享'">
        </div>
        <div class="w-100">
          <p class="f6 f5-l lh-copy">
            {{detail.article}}
          </p>
        </div>
      </article>
    </el-card>
    <el-card class="mt4">
      <div slot="header" class="clearfix">
        <like :articleId="detail.id" :count="detail.likeCount" :like="detail.like" />
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-position="top">
        <el-form-item label="评论" prop="comment">
          <el-input v-model="form.comment" type="textarea" :rows="4"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="fr" type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
        </el-form-item>
      </el-form>
      <div class="bt b--black-10">
        <a v-for="com in commentList" v-bind:key="com.id" class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
          <div class="dtc w3">
            <img :src="com.creator.avatar" class="db w-100" />
          </div>
          <div class="dtc v-top pl2">
            <h1 class="f6 f5-ns fw6 lh-title black mv0">{{com.creator.nickname}}</h1>
            <h2 class="f6 fw4 mt2 mb0 black-60">{{com.comment}}</h2>
          </div>
        </a>
      </div>
      <el-pagination class="tc" layout="total, prev, pager, next" @current-change="handleCurrentPaage" :current-page="currentPage" :page-size="pageSize" :total="commentCount">
      </el-pagination>
    </el-card>
  </el-col>
</el-row>
</template>

<script>
import {
  mapState,
} from 'vuex';
import Like from '@/components/Like';

export default {
  name: 'ArticleDetail',
  props: ['id'],
  data() {
    return {
      form: {
        comment: '',
      },
      rules: {
        comment: [{
          required: true,
          message: '评论不能为空',
        }],
      },
      currentPage: 1,
      pageSize: 10,
    };
  },
  computed: mapState({
    detail: state => state.social.articleDetail,
    commentList: state => state.social.commentList,
    commentCount: state => state.social.commentCount,
  }),
  watch: {
    currentPage(newPage) {
      this.getCommentList({
        page: newPage,
      });
    },
  },
  methods: {
    getArticleDetail() {
      this.$store.dispatch('getArticleDetail', {
        id: this.id,
      });
    },
    getCommentList({
      page = this.currentPage,
      pageSize = this.pageSize,
    } = {}) {
      this.$store.dispatch('getCommentList', {
        articleId: this.id,
        start: (page - 1) * pageSize,
        limit: pageSize,
      });
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$http.post('/social/comment', {
            articleId: this.id - 0,
            comment: this.form.comment,
          })
            .then(() => {
              this.$notify({
                title: '成功',
                message: '评论成功',
                type: 'success',
              });
              this.$refs.form.resetFields();
              this.getCommentList();
            })
            .catch(() => {
              this.$notify({
                title: '失败',
                message: '评论失败',
                type: 'error',
              });
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleCurrentPaage(page) {
      this.currentPage = page;
    },
  },
  mounted() {
    this.getArticleDetail();
    this.getCommentList();
  },
  components: {
    Like,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.persion-box {
  margin: 20px auto;
}

.text-over {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.piclen {
  width: 40px;
  height: 20px;
  line-height: 20px;
  background: rgba(0, 0, 0, .7);
  box-shadow: #fff 0 0 2px;
}

.pa0 {
  padding: 0;
}
</style>

